<template>
	<jf-navigation background="#ffffff">{{$t('login.register.navigation')}}</jf-navigation>
	<view class="form_menu">
		<view :class="{'active': data.currentIndex === 0}" @click="handleChange(0)">{{$t('login.register.menu1')}}</view>
		<view :class="{'active': data.currentIndex === 1}" @click="handleChange(1)">{{$t('login.register.menu2')}}</view>
	</view>
	<swiper :duration="200" :current="data.currentIndex" class="form_swiper" disable-touch>
		<swiper-item>
			<jf-input :placeholder="$t('login.register.placeholderCountry')" :disabled="data.loading" mode="selector" v-model="data.country" @click="data.showCountry = true"></jf-input>
			<jf-input :icon="email" :placeholder="$t('login.register.placeholderEmail')" :disabled="data.loading" v-model="form.email"></jf-input>
			<jf-input :icon="email" :placeholder="$t('login.register.placeholderEmailCode')" :disabled="data.loading" v-model="form.emailCode" :maxlength="6">
				<template #right>
					<view class="form_code" @click="send(1)">{{$t(emailSms.prompt)}}</view>
				</template>
			</jf-input>
			<jf-input :icon="password" password :placeholder="$t('login.register.placeholderPassword')" :disabled="data.loading" v-model="form.password" :maxlength="20"></jf-input>
			<jf-input :icon="password" password :placeholder="$t('login.register.placeholderResetPassword')" :disabled="data.loading" v-model="form.resetPassword" :maxlength="20"></jf-input>
		</swiper-item>
		<swiper-item>
			<jf-input :placeholder="$t('login.register.placeholderCountry')" :disabled="data.loading" mode="selector" v-model="data.country" @click="data.showCountry = true"></jf-input>
			<jf-input :icon="phone" :placeholder="$t('login.register.placeholderPhone')" :disabled="data.loading" v-model="form.phone"></jf-input>
			<jf-input :icon="phone" :placeholder="$t('login.register.placeholderPhoneCode')" :disabled="data.loading" v-model="form.phoneCode" :maxlength="6">
				<template #right>
					<view class="form_code" @click="send(2)">{{$t(phoneSms.prompt)}}</view>
				</template>
			</jf-input>
			<jf-input :icon="password" password :placeholder="$t('login.register.placeholderPassword')" :disabled="data.loading" v-model="form.password" :maxlength="20"></jf-input>
			<jf-input :icon="password" password :placeholder="$t('login.register.placeholderResetPassword')" :disabled="data.loading" v-model="form.resetPassword" :maxlength="20"></jf-input>
		</swiper-item>
	</swiper>
	<view class="register_agreement">
		<image :src="form.agreement ? select : unselect" @click="handleAgreement()"></image>
		<view>{{$t('login.register.agreementPrompt')}}</view>
		<view @click="openAgreement()">{{$t('login.register.agreement')}}</view>
	</view>
	<view class="form_submit">
		<zq-button-ts :loading="data.loading" @click="submit()">{{$t('login.register.submit')}}</zq-button-ts>
	</view>
	<view class="register_login" @click="toLogin()">{{$t('login.register.login')}}</view>
	
	<jf-picker :range="data.countrys" v-model:show="data.showCountry" v-model="form.iso" v-model:label="data.country"></jf-picker>
	
	<view class="register_fixed" v-if="data.showAgreement">
		<view class="register_container">
			<view class="register_title">
				<view>{{$t('login.register.agreementTitle')}}</view>
			</view>
			<scroll-view class="register_content" scroll-y="true">
				<view class="register_content_text" v-html="data.agreementContent"></view>
			</scroll-view>
			<view class="register_btn">
				<zq-button-ts width="622" @click="consent()">{{$t('login.register.agreementBtn')}}</zq-button-ts>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, getCurrentInstance, onMounted, nextTick } from 'vue';
	import select from "@/static/images/common/select_icon.png"
	import unselect from "@/static/images/common/unselect_icon.png"
	import email from "@/static/images/common/input_icon_email.png"
	import phone from "@/static/images/common/input_icon_phone.png"
	import password from "@/static/images/common/input_icon_password.png"
	import Form from "@/static/utils/Form"
	import Route from "@/static/utils/Route"
	import { sendSms, register } from "@/api/login"
	import { useStore } from "@/store/main"
	import { getAgreement } from "@/api/common"
	
	const store = useStore()
	const { proxy } = getCurrentInstance()
	const router = new Route();
	const data = reactive({
		currentIndex: 0,
		loading: false,
		showCountry: false,
		countrys: store.getCountryList,
		country: "",
		showAgreement: false,
		agreementContent: ''
	})
	const form = reactive({
		iso: undefined,
		email: undefined,
		phone: undefined,
		emailCode: undefined,
		phoneCode: undefined,
		password: undefined,
		resetPassword: undefined,
		agreement: false
	})
	const emailSms = reactive(Form.getSms({
		name: 'email',
		api: sendSms,
		prompt: 'common.sms.begin',
		sendMessage: 'common.sms.send',
		successMessage: 'common.sms.success',
		failMessage: 'common.sms.fail',
		againMessage: 'common.sms.again',
		disabled: data.loading
	}))
	const phoneSms = reactive(Form.getSms({
		name: 'phone',
		api: sendSms,
		prompt: 'common.sms.begin',
		sendMessage: 'common.sms.send',
		successMessage: 'common.sms.success',
		failMessage: 'common.sms.fail',
		againMessage: 'common.sms.again',
		disabled: data.loading
	}))
	
	const handleChange = (currentIndex: 0 | 1):void =>{
		if(data.loading) return
		if(data.currentIndex !== currentIndex){
			data.country = undefined
			Form.resetForm(form)
		}
		data.currentIndex = currentIndex
	}
	const send = (type: number):void => {
		if(data.loading) return
		if(type === 1){
			if(Form.checkRegEx(form.email, 'email')){
				emailSms.queryParams = {
					type: 1,
					email: form.email
				}
				Form.sendSmsCode(emailSms)
			}else{
				uni.showToast({
					title: proxy.$t('common.sms.emailError'),
					icon: "none"
				})
			}
		}else{
			if(form.phone){
				phoneSms.queryParams = {
					type: 2,
					phone: form.phone
				}
				Form.sendSmsCode(phoneSms)
			}else{
				uni.showToast({
					title: proxy.$t('common.sms.phoneError'),
					icon: "none"
				})
			}
		}
	}
	const handleAgreement = ():void =>{
		if(data.loading) return
		form.agreement = !form.agreement
	}
	const openAgreement = ():void =>{
		if(data.loading) return
		data.showAgreement = !data.showAgreement
	}
	const toLogin = ():void =>{
		if(data.loading) return
		router.back({disabled: data.loading})
	}
	const consent = ():void => {
		form.agreement = true
		data.showAgreement = false
	}
	const submit = ():void =>{
		if(!form.agreement){
			data.showAgreement = true
			uni.showToast({
				title: proxy.$t('login.register.agreementNone'),
				icon: "none"
			})
		}else if(!form.iso){
			uni.showToast({
				title: proxy.$t('login.register.placeholderCountry'),
				icon: "none"
			})
		}else if(data.currentIndex === 0 && !form.email){
			uni.showToast({
				title: proxy.$t('login.register.placeholderEmail'),
				icon: "none"
			})
		}else if(data.currentIndex === 0 && !form.emailCode){
			uni.showToast({
				title: proxy.$t('login.register.placeholderEmailCode'),
				icon: "none"
			})
		}else if(data.currentIndex === 1 && !form.phone){
			uni.showToast({
				title: proxy.$t('login.register.placeholderPhone'),
				icon: "none"
			})
		}else if(data.currentIndex === 1 && !form.phoneCode){
			uni.showToast({
				title: proxy.$t('login.register.placeholderPhoneCode'),
				icon: "none"
			})
		}else if(!form.password || form.password.length < 6 || form.password.length > 20){
			uni.showToast({
				title: proxy.$t('login.register.placeholderPassword'),
				icon: "none"
			})
		}else if(form.password !== form.resetPassword){
			uni.showToast({
				title: proxy.$t('login.register.placeholderDisaffinityPassword'),
				icon: "none"
			})
		}else{
			data.loading = true;
			const upjson = {
				account: data.currentIndex === 0 ? form.email : form.phone,
				password: form.password,
				code: data.currentIndex === 0 ? form.emailCode : form.phoneCode,
				type: data.currentIndex === 0 ? 1 : 2,
				iso: form.iso
			}
			register(upjson).then(() => {
				router.redirect({
					url: "/pages/login/register/success/success"
				})
			}).catch((error:any) => {
				data.loading = false;
				uni.showToast({
					title: proxy.$t(error.msg),
					icon: "none"
				})
			})
		}
	}
	
	onMounted(() => {
		nextTick(() => {
			getAgreement(4).then((res:any):void => {
				data.agreementContent = res.data.content
			})
		})
	})
</script>

<style lang="scss">
	.form_swiper{
		width: 100%;
		height: 704rpx;
	}
	.register_agreement{
		width: 100vw;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 24rpx;
		color: var(--color-primary);
		font-weight: 400;
		padding: 0 48rpx;
		image{
			width: 32rpx;
			height: 32rpx;
			margin-right: 12rpx;
		}
		view{
			&:nth-child(3){
				color: var(--color-primary-active);
			}
		}
	}
	.register_login{
		font-size: 28rpx;
		color: var(--color-primary);
		line-height: 40rpx;
		margin-top: 43rpx;
		font-weight: 400;
		text-align: center;
	}
	
	.register_fixed{
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		.register_container{
			position: absolute;
			left: 50%;
			top: 50%;
			width: 686rpx;
			transform: translate(-50%,-50%);
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			.register_title{
				width: 100%;
				height: 130rpx;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				view{
					color: var(--color-primary);
					font-size: 32rpx;
					line-height: 45rpx;
					font-weight: 400;
				}
			}
			.register_content{
				width: 100%;
				height: 700rpx;
				.register_content_text{
					font-size: 26rpx;
					color: #7C8493;
					font-weight: 400;
					line-height: 40rpx;
				}
			}
			.register_btn{
				width: 100%;
				padding: 70rpx 0;
				box-sizing: border-box;
			}
		}
	}
</style>